<template>
  <div>
    <el-popover placement="top" width="700px" v-model="visible">
  <p style="text-align: center; margin: 0" >文章信息选择</p>
  <div style="text-align: right; margin: 0">
   <el-form ref="article" :model="form" label-width="80px">

  <el-form-item label="文章标题">
    <el-input v-model="article.articleName"></el-input> 
  </el-form-item>

  <el-form-item label="文章分类">
    <el-select v-model="article.classifyName" placeholder="请选择文章分类" style="width:100%">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
 
  <el-form-item label="文章标签">
    <el-checkbox-group v-model="article.labelName">
      <el-checkbox label="MySQL" name="type"></el-checkbox>
      <el-checkbox label="Linux" name="type"></el-checkbox>
      <el-checkbox label="PHP" name="type"></el-checkbox>
      <el-checkbox label="技术杂谈" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>

  <el-form-item label="文章描述">
    <mavon-editor v-model="value" style="height: 100%" :ishljs = "true" ref="md" ></mavon-editor>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="visible = false">取消</el-button>
  </el-form-item>
</el-form>
  </div>
     <el-button type="primary" class="button" @click="upload" slot="reference">文章上传<i class="el-icon-upload el-icon--right"></i></el-button>
</el-popover>
 
  </div>
            

</template>

<script>
export default 
{
    name: 'HideForm',
      data() {
      return {
        visible: false,
        article:{
          articleName:"",
          description:"",
          classifyName:"",
          labelName:[],
          value:""
        },
      };
    },
    methods: {
      onSubmit :function() {
        this.$emit("onSubmit", this.article)
      }
    },
    create(){

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>

</style>
